<template>
  <div class="screen-container" ref="domRef">
    <div class="screen-content">
      <!-- <a-button type="primary" @click="toggleDom" class="mr-2">
        {{ isDomFullscreen ? 'Exit Dom Full Screen' : 'Enter Dom Full Screen' }}
      </a-button> -->
      <div class="header-section" ref="screenRef">
        <ScreenHeader @click="toggleDom" />
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import windowResize from '@/utils/resize';
import { onMounted, onUnmounted, ref } from 'vue';
import ScreenHeader from './ScreenHeader.vue';
import { useFullscreen } from '@vueuse/core';

// const { screenRef, calcRate, windowDraw, unWindowDraw } = windowResize();

const domRef = ref<Nullable<HTMLElement>>(null);
const { toggle: toggleDom, isFullscreen: isDomFullscreen } = useFullscreen(domRef);

onMounted(() => {
  // 监听浏览器窗口尺寸变化
  // windowDraw();
  // calcRate();
});

onUnmounted(() => {
  // unWindowDraw();
});
</script>

<style lang="scss" scoped>
@import './variables.scss';

@keyframes example {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.screen-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  // margin: 10px 0;
  // background-color: aqua; // background-color: $theme-color;
}

.screen-content {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  animation: example 3s;
  // background-image: url('@/assets/images/home_bg.png');

  .header-section {
    height: 90px;
  }

  .loading-title {
    color: #fff;
    font-size: $base-font-size;
  }
}
</style>
